<template>
	<view class="mf-wrap">
		<!-- 广告位横2 -->
		<view class="mf-home-slide mf-home-slider-2">
			<view v-for="(item,index) in sliderData.app_index_center_four_adver" :key="index">
				<view @tap="goUrl(item.url,'')">
					<image :src="item.pic"></image>
				</view>
			</view>
			
		</view>
		
		<!-- 食材直供限量 -->
		<view class="mf-home-slide mf-home-slider-box" v-if="zhigongLimit.length">
			<view class="title title-zhigong"
			:style="{backgroundImage:'url('+ mf_slider_zhigong +')'}"
			>
				<text>食材直供限量</text>
				<navigator 
				class="navigator"
				:style="{backgroundImage:'url('+ mf_slider_nav +')'}" 
				url="../shop_new/shopDetail/shopDetail?store_id=1">了解更多</navigator>
			</view>
			<view class="mf-home-slider-box-info-swiper">	
				<swiper :class="zhigongLimit.length>1?'mf-swiper-dot':'mf-swiper'" 
					:indicator-dots="zhigongLimit.length>1" 
					indicator-color="#ccc" indicator-active-color="#666">
					<swiper-item class="mf-home-swiper-item" v-for="(items,idx) in zhigongLimit" :key="idx">
						<view class="mf-slider-item mf-slider-item-3" v-for="(item,index) in items" :key="index">
							<view class="mf-slider-3-img" @click="toShiCaiUrl(item.store_id,item.product_id)">
								<image :src="changeUploadImgUrlToOss(item.image)"></image>
								<text class="mf-slider-item-3-kc">{{ item.stock_num=== "-1" ? '不限量':'库存：'+ item.stock_num }}</text>
							</view>
							<view class="mf-slider-3-title">
								<view class="m-today-limit-title">{{item.name}}</view>
								<text class="red">
									<text class="small">￥</text>
									<text>{{ item.price }}/{{ item.unit }}</text>
								</text>
							</view>
						</view>	
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<!-- 当日优惠 -->
		<view class="mf-home-slide mf-home-slider-box" v-if='todayLimit.length'>
			<view class="title title-limit"
			:style="{backgroundImage:'url('+ mf_slider_limit +')'}" 
			>
				<text>融客隆当日优惠</text>
				<navigator
				class="navigator"
				:style="{backgroundImage:'url('+ mf_slider_nav +')'}" 
				url="../shop_new/shopDetail/shopDetail?store_id=11">了解更多</navigator>
			</view>
			<view class="mf-home-slider-box-info-swiper">
				<swiper :class="todayLimit.length>1?'mf-swiper-dot':'mf-swiper'" :indicator-dots="todayLimit.length>1" 
					indicator-color="#ccc" indicator-active-color="#666">
					<swiper-item class="mf-home-swiper-item" v-for="(items,idx) in todayLimit" :key="idx">
						<view class="mf-slider-item mf-slider-item-3" v-for="(item,index) in items" :key="index"
							@click="toShiCaiUrl(item.store_id,item.product_id)">
							<view class="mf-slider-3-img">
								<image :src="changeUploadImgUrlToOss(item.image)"></image>
								<text class="mf-slider-item-3-kc">{{ item.stock_num=== "-1" ? '不限量': '库存：'+ item.stock_num }}</text>
							</view>
							<view class="mf-slider-3-title">
								<view class="m-today-limit-title">{{item.name}}</view>
								<text class="red">
									<text class="small">￥</text>
									<text>{{ item.price }}/{{item.unit}}</text>
								</text>
							</view>
						</view>
						
					</swiper-item>
				</swiper>
			</view>
		</view>
	
	
		<!-- 服务到家 -->
		<view class="mf-home-slide mf-home-slider-box">
			<view class="title title-service"
			:style="{backgroundImage:'url('+ mf_slider_service +')'}"
			>
				<text>服务到家</text>
				<text class="navigator"
				@tap="goUrl('https://www.jlmkkj.com/wap.php?g=Wap&c=Appoint&a=index','服务到家')"
				:style="{backgroundImage:'url('+ mf_slider_nav +')'}" 
				>了解更多</text>
			</view>
			<view class="mf-home-slider-box-info mf-slider-service">	
				<view class="mf-slider-item mf-slider-service-item" v-for="(item,index) in sliderData.m_service" :key="index"
				@tap="goUrl('https://www.jlmkkj.com/wap.php?g=Wap&c=Appoint&a=category&cat_id='+ item.cat_id,item.cate_name)">
					<image :src="servicePic(item.cat_pic)"></image>
					<view class="mf-slider-service-title">
						<text>{{item.cat_name}}</text>
						<text>25分钟送达</text>
					</view>
				</view>	
			</view>
		</view>
		<!-- 选项卡 -->
		<view class="mf-home-slider-switch" v-if="0">
			<view class="mf-home-slider-switch-item" :class="{active:switchActive===index}" v-for="(item,index) in switchNav" :key="index" @tap="homeSwitch(index)">
				<view class="title">{{item.title}}</view>
				<view class="sub-title">{{item.subTitle}}</view>
			</view>
		</view>
		<!-- 选项卡列表 -->
		<view class="mf-home-slider-switch-info" v-if="0">
			<view class="mf-home-slider-switch-info-item" v-for="(item,index) in switchList" :key="index">
				<image src="./m-home-slider-switch.png"></image>
				<view class="title">{{item.title}}</view>
				<view class="status">
					<text class="red">
						<text class="small">￥</text>
						<text class="price">20</text>
					</text>
					<text class="sale">
						<text>已售</text>
						<text>0</text>
					</text>
				</view>
				<view class="mf-slider-3-tag">满¥10减¥5</view>
				<view class="buy-btn">+</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mf_slider_nav,
		mf_slider_limit,
		mf_slider_zhigong,
		mf_slider_service,
	} from './m-base64.js'
	import common from '../../utils/common.js';
	import { changeUploadImgUrlToOss } from '../../utils/mf.js'
	
	export default {
		props: {
			sliderData:{
				type:Object,
				default:[]
			}
		},
		data(){
			return{
				mf_slider_nav,
				mf_slider_limit,
				mf_slider_zhigong,
				mf_slider_service,
				todayLimit:[],
				zhigongLimit:[]
			}
		},
		mounted(){
			this.getLimitData()
		},
		methods:{
			pages(list,len) {
			    const  pages = []
			    list.forEach((item, index) => {
			        const page = Math.floor(index / len)
			        if (!pages[page]) {
			          pages[page] = []
			        }
			        pages[page].push(item)
			    });
			  return pages
			},
			goUrl(url,title){
				common.parseUrl(url, '', false, title);
			},
			getLimitData(){
				// 首页今日限量
				var param = {
					store_id: 11,
					lng: '',
					lat: ''
				}
				
				common.post('Shop_new&a=ajax_shop', param, data => {
					// console.log('today')
					// console.log(data)
					if(data.cat_discount && data.cat_discount.good_list){
						// this.todayLimit = data.cat_discount.good_list.slice(0,6)
						this.todayLimit = this.pages(data.cat_discount.good_list,6)
						console.log('sy')
						console.log(this.todayLimit)
					}
				})
				
				// 首页食材
				var param = {
					store_id: 1,
					lng: '',
					lat: ''
				}
				
				common.post('Shop_new&a=ajax_shop', param, data => {
					if(data.cat_discount && data.cat_discount.good_list){
						// this.zhigongLimit = data.cat_discount.good_list.slice(0,6)
						this.zhigongLimit = this.pages(data.cat_discount.good_list,6)
					}
				})
				
			},
			changeUploadImgUrlToOss,
			homeSwitch(idx){
				this.switchActive = idx
			},
					
			servicePic(pic){
				let url = 'https://jlmkkj.oss-accelerate.aliyuncs.com/upload/system/'
				if(pic.includes('/upload/system')){
					pic = pic.replace('/upload/system/','')
				}
				return url + pic
			},
			toShiCaiUrl(store_id,product_id){
				// shop_new/goodsDetail/goodsDetail?store_id=1%3Fstore_id%3D1&=&=&product_id
				const scUrl = "../shop_new/goodsDetail/goodsDetail"
				uni.navigateTo({
					url:`${scUrl}?store_id=${store_id}&product_id=${product_id}`
				})
			},
			toOUrUrl(url){
				location.href = url
			}
		}
	}
</script>
<style lang="scss">
	.mf-swiper {
		height:670upx;
	}
	
	.mf-swiper-dot {
		height:700upx;
	}
	
	.mf-home-swiper-item {
		display: flex;
		flex-wrap: wrap;
		padding:4vw 4vw 10vw;
		box-sizing: border-box;
	}
	
	.m-today-limit-title {
		height:30upx;
		line-height: 30upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mf-home-slider-switch-info {
		width: 92vw;
		margin:0 auto;
		overflow: hidden;
	}	
	.mf-home-slider-switch-info-item {
		position: relative;
		float:left;
		width:44vw;
		padding:4vw;
		margin-bottom:4vw;
		background-color: #fff;
		border-radius: 12px;
		box-sizing: border-box;
		&:nth-child(2n-1){
			margin-right:4vw;
		}
		image {
			width:100%;
			height:30vw;
			border-radius: 12px;
		}
		.status {
			margin-bottom:2vw;
		}
		.title,.price {
			font-size:14px;
		}
		.small {
			font-size:10px;
		}
		.sale {
			margin-left:3vw;
			font-size:12px;
			color:#c4c4c4;
		}
		.buy-btn {
			position: absolute;
			right:4vw;
			bottom:4vw;
			width:8vw;
			height:8vw;
			line-height: 7.6vw;
			background-color: red;
			color:#fff;
			text-align: center;
			border-radius: 50%;
			font-size:20px;
		}
	}
	
	.mf-home-slider-switch{
		display: flex;
		justify-content: space-between;
	}
	.mf-home-slider-switch-item{
		width:25%;
		margin-top: 5vw;
		padding-bottom:2vw;
		margin-bottom:5vw;
		text-align: center;
		.title {
			font-size:16px;
		}
		.sub-title {
			font-size:12px;
			line-height: 20px;
		}
		&.active {
			position: relative;
			color:#f60;
			&:after {
				content: '';
				position: absolute;
				left:50%;
				bottom:0;
				margin-left:-5vw;
				width:10vw;
				height:4px;
				border-radius: 2px;
				background-color: #f60;	
			}
		}
	}
	.red {
		color:red;
	}
	.mf-home-slide {
		margin-top:3vw;
		image{
			border-radius: 12px;	
		}
	}
	.mf-home-slider-2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		image {
			width:45vw;
			height:21vw;
		}
	}
	.mf-home-slider-box {
		background-color: #fff;
		border-radius: 12px;
		.title {
			width:100%;
			display: flex;
			justify-content: space-between;
			background-position: center top;
			background-repeat: no-repeat;
			background-size: 100%;
			text,.navigator{
				height:18vw;
				line-height: 12vw;;
				font-size:16px;
				color:#fff;
			}
			text {
				margin-left:6vw;
				font-weight: bold;
			}
			.navigator {
				margin-right:6vw;
				padding-right:7vw;
				background:url('') no-repeat right 3.5vw;
				background-size: 5vw;
			}
		}
		.mf-home-slider-box-info,.mf-home-slider-box-info-swiper {
			width:100%;
			margin-top:-7vw;
			background-color: #fff;
			border-radius: 12px;
			
		}
	}
	.mf-home-slider-box-info{
		display: flex;
		flex-wrap: wrap;
		padding:4vw;
		box-sizing: border-box;
	}
	.mf-slider-item{
		image{
			width:100%;
			
		}
	}
	.mf-slider-item-3 {
		width:calc(76vw / 3);
		&:nth-child(3n-1){
			padding: 0 4vw;
		}
		margin-top:3vw;
		&:nth-of-type(1),
		&:nth-of-type(2),
		&:nth-of-type(3){
			margin-top:0;
		}
		image {
			height:calc(76vw / 3);
		}
	}
	.mf-slider-3-img {
		position: relative;
		text{
			position: absolute;
			left:0;
			bottom:0;
			width:100%;
			height:24px;
			line-height: 22px;
			font-size:12px;
			text-align: center;
			color:red;
			background-color: rgba(255,255,255,0.5);
		}
	}
	
	.mf-slider-3-title {
		padding:6px 0;
		font-size:14px;
		line-height: 1.5;
		text-align: center;
		.small {
			font-size:10px;
		}
	}
	
	.mf-slider-3-tag {
		display: inline-block;
		padding:2px 4px;
		font-size:10px;
		border:1px solid red;
		background-color: #fff7f7;
		border-radius: 4px;
		color:red;
	}
	
	.mf-slider-service {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.mf-slider-service-item {
		width:40vw;
		margin-top:3vw;
		image {
			height:21vw;
		}
		&:nth-of-type(1),
		&:nth-of-type(2) {
			margin-top:0;
		}
	}
	
	.mf-slider-service-title {
		display: flex;
		justify-content: space-between;
		text {
			line-height: 30px;
			&:nth-of-type(1){
				font-size:14px;
			}
			&:nth-of-type(2){
				font-size:10px;
			}
		}
	}



</style>
